<!-- 
如何使用：

1. main.js 全局注册组件：
import XLoading from './components/loading/xLoading.vue'
Vue.component('x-loading', XLoading); //组件挂载到全局，方便每个页面使用

2. store 里面存放请求状态，x-loading组件会监听改状态
const store = new Vuex.Store({
	state: {
		requestLoading: false, //加载等待是否显示,
	}
	mutations: {
		request_show_loading(state) {
			state.requestLoading = true;
		},
		//隐藏请求加载动画
		request_hide_loading(state) {
			state.requestLoading = false;
		},
	}
}

3. 全局绑定 showLoading, hideLoading 方法
//请求加载组件
function showLoading(){ //挂载全局显示请求加载动画
	store.commit('request_show_loading');
}
function hideLoading(){ //挂载全局隐藏请求加载动画
	store.commit('request_hide_loading');
}
Vue.prototype.$showLoading = showLoading; //全局显示动画可以 this.$showLoading();
Vue.prototype.$hideLoading = hideLoading; //全局隐藏动画可以 this.$hideLoading();

4. 使用组件，直接在 wxml 需要用到的地方加载该组件：
<x-loading :isShowLaunch="isLaunchMP" name="kingleber"></x-loading> //支持是否启动时显示官方logo, 如果不需要可以不用带isShowLaunch参数，目前支持波浪动画

5. 外部使用，以请求网络请求例子：
launchRequest(e) {
	this.isLoading = true 
	this.$showLoading(); //请求前调用
	getGoods().then(res => {
		this.isLoading = false
		this.hasData = true
		this.isLaunchMP = false
		this.$hideLoading(); //请求后调用
	}).catch(err=>{
		this.isLoading = false
		this.$hideLoading(); //请求后调用，如果忘记调用，组件要等到最大延迟结束才结束，或使用方引起 组件重新渲染不再加载到该组件也会结束
	})
}
-->
<template>
	<view class="loading-mask" v-show="loadingShow">
		<view class="loading-container">
			<!-- 波浪效果 -->
			<view class="wave-container" v-if="isShowLaunch">
				<view class="txt">{{title}}</view>
			</view>
			<!-- 旋转loading效果 -->
			<template v-else>
				<view class="loading-spinner"></view>
				<view class="loading-text">加载中...</view>
			</template>

			<!-- 聚光灯效果
			<view class="spot-container">
				<view class="spot">kingleber...</view>
			</view -->	
		</view>
	</view>
</template>

<script>
	export default {
		name: "xLoading",
		props: {
			isShowLaunch: false,
			title:{
				type:String,
				default:"King Leber",
			}
		},
		data() {
			return {
				waveHeight: 0,
			};
		},
		computed: {
			//计算属性判断vuex中的显示状态
			loadingShow() {
				const loading = this.$store.state.requestLoading;
				console.log("xloading loading=", loading)
				if (loading) {
					// Start a timer to automatically set loading to false after 15 seconds
					setTimeout(() => {
						this.$hideLoading();  //如果15秒都没有加载数据成功， 主动放弃加载页面，避免使用者忘记在catch调用的糟糕情况
					}, 15000); 
				}
				return loading;
			}
		},
		methods: {

		}
	};
</script>

<style lang="scss" scoped>
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.loading-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.loading-spinner {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 3px solid #fff;
		border-top-color: transparent;
		animation: spin 1s infinite linear;
	}

	.loading-text {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: white;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(180deg);
		}

		75% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>

<!-- 波浪效果 -->
<style lang="scss" scoped>
	.wave-container {
		position: relative;
		width: 100%;
		background: #FFF;
		border-radius: 10rpx;
		padding: 10rpx;

		.txt {
			--c: #2196F3;
			--w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
			--w2: radial-gradient(100% 57% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
			background: var(--w1), var(--w2), var(--w1), var(--w2);
			background-position-x: -200%, -100%, 0%, 100%;
			background-position-y: 100%;
			background-size: 50.5% 100%;
			animation: m 1s infinite linear;
			font-size: 30px;
			font-weight: bold;
			color: transparent;
			-webkit-background-clip: text;
			/*文本裁切*/
			-webkit-text-stroke: 2px var(--c);
			padding: 5px;
		}
	}

	@keyframes m {
		0% {
			background-position-x: -200%, -100%, 0%, 100%
		}

		100% {
			background-position-x: 0%, 100%, 200%, 300%
		}
	}
</style>


<!-- 聚光灯效果 -->
<style lang="scss" scoped>
	$spotDiameter: 30;

	.spot-container {
		position: relative;
		width: 100%;
		background: #FFF;
		border-radius: 10rpx;
		padding: 20rpx;

		.spot {
			position: relative;
			font-size: 48rpx;
			// color: #FFF; //打开就有聚光灯效果，同时必须和spot-container background 颜色一致

			&::after {
				content: 'kingleber...';
				position: absolute;
				top: 0;
				left: 0;
				/* 透明色 */
				color: transparent;
				// background-image: linear-gradient(to right, #c23616, #192a56, #00d2d3, yellow,
				// 		#6d214f, #2e86de, #4cd137, #e84118);
				background-image: linear-gradient(to right,
						#6d214f, #2e86de, #4cd137, #e84118);
				/* 背景绘制区域，值为text时，给文字设置镂空效果，前提必须是文字颜色为透明色 */
				background-clip: text;
				/* 谷歌浏览器私有属性 */
				-webkit-background-clip: text;
				/* 使用裁切方法创建元素的可显示区域 circle表示裁切一个圆形 100px表示圆的直径 0%和50%表示圆心位置 直径和圆心两组值中间用at隔开*/
				clip-path: circle(#{spotDiameter}px at 0% 50%);
				-webkit-clip-path: circle(#{$spotDiameter}px at 0% 50%);
				animation: move 5s infinite;
			}
		}
	}

	@keyframes move {
		0% {
			clip-path: circle(#{$spotDiameter}px at 0% 50%);
			-webkit-clip-path: circle(#{$spotDiameter}px at 0% 50%);
		}

		50% {
			clip-path: circle(#{$spotDiameter}px at 100% 50%);
			-webkit-clip-path: circle(#{$spotDiameter}px at 100% 50%);
		}

		100% {
			clip-path: circle(#{$spotDiameter}px at 0% 50%);
			-webkit-clip-path: circle(#{$spotDiameter}px at 0% 50%);
		}
	}
</style>